<template>
  <div class="customer-card">
    <div>
      <p class="card_title">电商数据总览</p>
    </div>
    <div class="customer-box" v-if="props.data?.shop_status">
      <div class="card-item">
        <p>应收总金额(元)</p>
        <p>{{ numFormat(props.data?.total_payable_amount) }}</p>
      </div>
      <div class="card-item">
        <p>实付总金额(元)</p>
        <p>{{ numFormat(props.data?.total_order_amount) }}</p>
      </div>
      <div class="card-item">
        <p>总消费订单数</p>
        <p>{{ numFormat(props.data?.total_order_num) }}</p>
      </div>
      <div class="card-item">
        <p>平均客单价(元)</p>
        <p>{{ numFormat(props.data?.avg_order_amount) }}</p>
      </div>
      <div class="card-item">
        <p>平均客单件(件)</p>
        <p>{{ numFormat(props.data?.avg_order_num) }}</p>
      </div>
      <div class="card-item">
        <p>今日消费金额(元)</p>
        <p>{{ numFormat(props.data?.today_order_amount) }}</p>
      </div>
      <div class="card-item">
        <p>今日购买件数</p>
        <p>{{ numFormat(props.data?.today_order_num) }}</p>
      </div>
      <div class="card-item">
        <p>复购次数</p>
        <p>{{ numFormat(props.data?.repurchase_num) }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { numFormat } from '@/utils/utils'
  const props = defineProps(['data'])
</script>

<style lang="scss" scoped>
  .customer-card {
    border-bottom: 2px solid #ffc69e !important;
    .card_title {
      font-size: 16px;
      line-height: 14px;
      color: #33302d;
      padding-bottom: 21px;
      font-family: STHeitiSC-Medium, STHeitiSC;
      padding: 21px 0;
      border-bottom: 1px solid #eaeaea;
      margin: 0 24px;
    }
    .customer-box {
      display: flex;
      // justify-content: space-around;
      padding: 25px 25px;

      white-space: nowrap;
      // overflow: scroll;
      overflow-x: auto;

      .card-item {
        flex: auto;
        text-align: center;
        margin-right: 25px;
        P {
          margin: 0;
          &:nth-of-type(1) {
            margin-bottom: 10px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #35383a;
            line-height: 16px;
          }
          &:nth-of-type(2) {
            font-size: 46px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #ff6b00;
            line-height: 46px;
          }
        }
      }

      .divider {
        height: 80px;
        margin: 0;
        background: #f0f0f0;
      }
    }
  }
</style>
